<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/config.js"></script>
		<script src="js/jquery-1.7.1.min.js" ></script>
		<script src="js/jquery.blockUI-2.3.3.js"></script>


		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-group label {
				width: 30%;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 70%;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a href="index.html" class="mui-btn mui-btn-link mui-btn-nav mui-pull-left"><span class="mui-icon mui-icon-back"></span></a>
			<h1 class="mui-title">设置密码</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>员工号</label>
					<input id='account' type="number" class="mui-input-clear mui-input" placeholder="请输入员工号">
				</div>
				<div class="mui-input-row">
					<label>姓&nbsp;&nbsp;&nbsp;名</label>
					<input id='username' type="text" class="mui-input-clear mui-input" placeholder="请输入姓名">
				</div>
				<div class="mui-input-row">
					<label>密&nbsp;&nbsp;&nbsp;码</label>
					<input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
				<div class="mui-input-row">
					<label>确&nbsp;&nbsp;&nbsp;认</label>
					<input id='password_confirm' type="password" class="mui-input-clear mui-input" placeholder="请确认密码">
				</div>
			</form>
			<div class="mui-content-padded">
				<button onclick="saveLove()" class="mui-btn mui-btn-block mui-btn-primary">保存</button>
			</div>
			<div class="mui-content-padded">
				<p></p>
			</div>
		</div>
		<script>
			function saveLove() {
				var accountBox = document.getElementById('account');
				var username = document.getElementById('username');
				var passwordBox = document.getElementById('password');
				var passwordConfirmBox = document.getElementById('password_confirm');
				
				var re = /^[1-9]+[0-9]*]*$/;   //判断字符串是否为数字     //判断正整数 /^[1-9]+[0-9]*]*$/ 
				if (!re.test(accountBox.value)) {　　　　
					mui.toast('员工号为数字，请重新输入！');　　　　
					return false;　　
				}else if(accountBox.value.trim().length >= 7){
					mui.toast('员工号不能超过6位，请重新输入！');　　　　
					return false;
				}
				
				if(username.value.trim().length <= 0){
					mui.toast('姓名不能为空，请重新输入！');　　　　
					return false;
				}else if(username.value.trim().length >= 10){
					mui.toast('姓名不能为空，请重新输入！');　　　　
					return false;
				}
				
				if(passwordBox.value.trim().length <= 0 || 
				    passwordConfirmBox.value.trim().length <= 0 ||
				        username.value.trim().length <= 0){
					mui.toast('密码不能为空，请重新输入！');　　　　
					return false;
				}else if(passwordBox.value.trim().length >= 10){
					mui.toast('密码不能超过15位，请重新输入！');　　　　
					return false;
				}else{
					if(passwordBox.value.trim() !=  passwordConfirmBox.value.trim()){
						mui.toast('两次密码不一致，请重新输入！');　　　　
						return false;
					}
					
				}
				
				
				
				
				var data = {
					"param": '{"accountBox":"' + accountBox.value + '","username":"' + username.value + '","passwordBox":"' + passwordBox.value + '"}'
				};
				//调用接口解析数据并遍历
				$.ajax({
					url: urlAdd + '/mobile/add',
					type: 'post',
					data: data,
					dataType: 'json',
					timeout: 10000,
					async: false,
					crossDomain: true,
									
						beforeSend: function() { //这里是开始执行方法，显示效果
								var Pwidth = document.body.clientWidth + "px";
								var Pheight = document.body.clientHeight + "px";
								$.blockUI({
									overlayCSS: {
										backgroundColor: 'gainsboro',
										opacity: '1',
										width: '' + Pwidth,
										heigh: '' + Pheight,
									},
									message: "<img src='images/wait.gif' style='vertical-align: text-top;vertical-align: middle;'><span style='vertical-align: middle;margin-left:10px;'>加载中...</span>",
									timeout:10000,
								css:{
									 position:'absolute',
										left:'30%',
										top:'35%',
										width:'50%',
										heigh:'10%',
										border:'0px',
										background:'none'
									}
								});
							},
							complete: function() { //方法执行完毕，效果自己可以关闭
								  $.unblockUI(); 
							},
							
					success: function(data) {
					   if(data == true){
					   	mui.toast('设置成功，请登录！');　
					   
					   }else{
					   	mui.toast('员工号已被注册！');
					   }
						
					},
					error: function(data) {
						mui.toast('系统繁忙，请稍后再试！');
					}
				});
				
				
			}
		</script>
	</body>

</html>